import React from 'react';
const OrderRate = () => {
    const [searchParams] = React.Router.useSearchParams();
    const orderid = searchParams.get('orderid') ? searchParams.get('orderid') : 0;
    const [orderInfo, setOrderInfo] = React.useState<any>({room: {}, guestlist: []});
    const [rate, SetRate] = React.useState(0)
    const [comment, SetComment] = React.useState('')

    React.useEffect(() => {
        getOrderInfoData();
    }, [orderid])

    const getOrderInfoData = async() =>
    {
        let result = await React.HTTP.post('/order/info', {
            orderid: orderid,
            busid: React.Business.id,
        })

        if(result.code == 1) 
        {
            setOrderInfo(result.data);
        }
    }

    // 评价
    const RateConfirm = async() =>
    {

        if(rate <= 0)
        {
            React.error('请选择评分')
            return;
        }

        let result = await React.HTTP.post('/order/rate', {
            orderid: orderid,
            busid: React.Business.id,
            rate: rate,
            comment: comment,
        })
        if (result.code == 1) 
        {
            React.success(result.msg, () => React.navigate(-1))
        }
        else 
        {
            React.error(result.msg)
        }
    }


    return (
        <>
            <link rel="stylesheet" href="/assets/css/order_info.css"></link>

            <div className="order_info">
                {/* 订单信息 */}
                <div className="info_content">
                    <div className="content_title">订单信息：</div>
                    <div className="content_item">
                        <p>入住时间</p>
                        <div>{orderInfo.starttime_text} {orderInfo.startday_text} - {orderInfo.endtime_text}  {orderInfo.endday_text}</div>
                    </div>
                    <div className="content_item">
                        <p>入住天数</p>
                        <div>共 {orderInfo.day_text} 晚</div>
                    </div>
                    <div className="content_item">
                        <p>订单价格</p>
                        <div className="content_price">￥{orderInfo.price}</div>
                    </div>
                    <div className="content_item">
                        <p>房间单价</p>
                        <div className="content_price">￥{orderInfo.room.price}</div>
                    </div>
                    <div className="content_item">
                        <p>支付方式</p>
                        <div>{orderInfo.type_text}</div>
                    </div>
                    <div className="content_item">
                        <p>入住人数</p>
                        <div>{orderInfo.guestlist.length} 人</div>
                    </div>
                    <div className="content_item">
                        <p>订单备注</p>
                        <div>{orderInfo.remark}</div>
                    </div>
                </div>

                {/* 酒店房间 */}
                <div className="info_footer">
                    <div className="content_title">房屋信息：</div>
                    <div className="detail">
                        <div className="thumb">
                            <img src={orderInfo.room.thumb_text} alt="" />
                        </div>
                        <div className="right">
                            <p>{orderInfo.room.name}</p>
                            <div className="tips">
                                {orderInfo.room.flag_text && orderInfo.room.flag_text.map((flag: any, index: any) => <span key={index}> {flag} </span>)}
                            </div>
                        </div>
                    </div>
                </div>


                {/* 评价 */}
                <div className="info_footer">
                    <div className="content_title">评价信息：</div>
                    <div className="comment">
                        <React.UI.Rate value={rate}  onChange={(val: number) => SetRate(val)} />

                        <React.UI.Divider
                            style={{
                                color: '#1677ff',
                                borderColor: '#1677ff',
                                borderStyle: 'dashed',
                            }}
                        ></React.UI.Divider>

                        <React.UI.TextArea className='textarea' placeholder="请输入评论内容"  value={comment} onChange={(val: string) => { SetComment(val) }} autoSize={{ minRows: 3, maxRows: 5 }}/>

                        <React.UI.Button onClick={RateConfirm} color='warning'>提交评价</React.UI.Button>
                    </div>
                </div>
            </div>
        </>
    )
}

export default OrderRate;